<!-- 登录页面 -->
<style>
/*	.container{
		height: 100%;
	}*/


	.form-top{
		overflow: hidden;
	    padding: 25px;
	    background: #fff;
	    -moz-border-radius: 4px 4px 0 0;
	    -webkit-border-radius: 4px 4px 0 0;
	    border-radius: 4px 4px 0 0;
	    text-align: center;
	}

	.login-form{
	    padding: 25px 25px 30px 25px;
	    background: #fff;
	    -moz-border-radius: 0 0 4px 4px;
	    -webkit-border-radius: 0 0 4px 4px;
	    border-radius: 0 0 4px 4px;
	    text-align: left;	
	}

	.form-box{
		position: absolute;
		left: 50%;
		top: 50%;
		width: 500px;
		height: 400px;
		margin-left: -250px;
		margin-top: -200px;
		border-radius: 50%;
	}

	.mask{
		position: absolute;
		height: 100%;
		width: 100%;
		background: rgba(78, 78, 78, 0.6);
	}

	.title{
		height: 50px;
		background-size: cover;
	}

	.btn-block{
		display: block;
		width: 80%;
		margin: 0 auto;
		height: 40px;
	}

	.login-form input{
		width: 80%;
		margin: 0 auto;
	}

	/* login icon font*/

@font-face {
	font-family: 'iconfont2';  /* project id 314378 */
	src: url('//at.alicdn.com/t/font_yqdyurkg9htfn7b9.eot');
	src: url('//at.alicdn.com/t/font_yqdyurkg9htfn7b9.eot?#iefix') format('embedded-opentype'),
	url('//at.alicdn.com/t/font_yqdyurkg9htfn7b9.woff') format('woff'),
	url('//at.alicdn.com/t/font_yqdyurkg9htfn7b9.ttf') format('truetype'),
	url('//at.alicdn.com/t/font_yqdyurkg9htfn7b9.svg#iconfont') format('svg');
}

</style>

<div class="container"
	:important="login"
	:css="{backgroundImage: 'url('+@bgimg + ')' , backgroundPosition: 'center' ,backgroundSize : 'cover' , width : '100%' , height : '100%' , position: 'relative' , padding : '0'}"
	:if="@display">

	<div class="mask"></div>
	<div class="row">

		<div class="col-sm-6 col-sm-offset-3 form-box">
			<div class="form-top">
				<!--<div id="title" :css="{backgroundImage: 'url('+@title +')' , height: '50px' , backgroundSize : 'cover' }"></div>-->

				<div id="title">
					<img :attr="{ src : @title }" alt="">
				</div>
			</div>
			<div class="login-form">

			    <form role="form" data-parsley-validate="" novalidate="" class="mb-lg" :validate="@loginValidate">
                <div class="form-group has-feedback "
                ms-class="[@errorInputName.indexOf('inputUsername')>-1 && 'has-error',  @successInputName.indexOf('inputUsername')>-1 &&'has-success'] ">
					<!--<i style="font-size: 15px;" class="iconfont2">&#xe625;</i>-->
					<input  id="inputUsername" type="text" placeholder="请输入用户名" class="form-control" ms-duplex="@user.username" ms-rules='{required:true,minlength:4,maxlength:20}'
                           data-required-message="请输入用户名" data-minlength-message="用户名长度不能少于4位" data-maxlength-message="用户名长度不能大于20位">
                    <span class="fa fa-user form-control-feedback text-muted"></span>
                </div>

                <div class="form-group has-feedback" ms-class="[@errorInputName.indexOf('inputPassword')>-1 && 'has-error',  @successInputName.indexOf('inputPassword')>-1 &&'has-success'] ">
                    <!--<span :css="{ backgroundImage: 'url('+@pwd + ')' }" ></span>-->
					<input id="inputPassword" type="password" placeholder="请输入密码" class="form-control" ms-duplex="@user.password" ms-rules='{required:true,minlength:0,maxlength:20}'
                           data-required-message="请输入密码" data-minlength-message="密码长度不能少于6位" data-maxlength-message="密码长度不能大于20位">
                    <span class="fa fa-lock form-control-feedback text-muted"></span>
                </div>

                <!-- :if="@errorMessage.length > 0 && @user.username.length > 0 && @user.password.length" -->
                <!--<p :if="@errorMessage.length > 0" style="font-size:small;color:red;width: 80%;margin: 0 auto;">{{@errorMessage}}</p>-->
					<hr>
                <button class="btn btn-block btn-primary" ms-class="[@errorInputName.indexOf('inputUsername')>-1 && 'disabled',@errorInputName.indexOf('inputPassword')>-1 && 'disabled']"
                	:click="@login">登录</button>
            </form>
			</div>
		</div>
	</div>
</div>